<template>
    <div style="padding:15px;background:#fff;border-radius: 10px;">
            <el-table
                class="custom-table"
                ref="multipleTable"
                :data="subjectivequestionslist"
                tooltip-effect="dark"
                style="width: 100%"
                stripe
                @selection-change="handleSelectionChange"
                :header-cell-style="{ background: '#D8E4F0', color: '#2A303B',fontWeight:'500' }">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    label="题号">
					<template slot-scope="scope">
						{{ scope.row.sourcename3==0?'-':scope.row.sourcename }}
					</template>
                </el-table-column>
                <el-table-column
                    prop="sourcename"
                    label="试题编号">
                </el-table-column>
                <el-table-column
                    label="题型名称"
                    prop="typename">
                </el-table-column>
                <el-table-column
                    label="满分"
                    prop="highestscore">
                </el-table-column>
                <el-table-column
                    label="评阅系数"
                    prop="difficulty">
                </el-table-column>
                <el-table-column
                    label="步长"
                    prop="bc">
                </el-table-column>
				<el-table-column
                    label="多评轮次">
					<template slot-scope="scope">
						{{ scope.row.doublescoretype==0?'-':'双评' }}
					</template>
                </el-table-column>
                <el-table-column
                    label="切图查看"
                    prop="status"
					width="300">
					<template slot-scope="scope">
						<!-- <div style="display:flex;"> -->
							<span style="color:#165DFF;cursor:pointer;font-size:12px;padding:0 8px;" v-for="(itemimg,num) in scope.row.imgurls" @click="showViewerclick(scope.row.imgurls,num)">切图{{num+1}}</span>
						<!-- </div> -->
					</template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    align="center"
                    width="120">
                    <template slot-scope="scope">
                        <div style="display: flex;" class="scopednr">
                            <b @click="editExamschool(scope.row)">编辑</b>
                            <b @click="dgdeletequestion(scope.row.sourceflagid)">删除</b>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="examfooter">
                <div class="examFootercontent">
                    <div>
                        <span class="totaldata">共<i>{{multipleSelection.length}}</i>条数据</span>
                        <el-button style="background:#D54941;color:#fff;margin-left:20px;border-color:#D54941;" @click="batchDeletateobjective">批量删除</el-button>
                    </div>
                    <!-- <div>
                        <el-pagination
                            background
                            @current-change="handleCurrentChange"
                            :page-sizes="[20, 50,100]"
                            @size-change="handleSizeChange"
                            :page-size="pageSize"
                            layout="sizes, prev, pager, next"
                            :total="total">
                        </el-pagination>
                    </div> -->
                </div>
            </div>
            <!-- 编辑主观题 -->
			<div class="objsubMain" v-if="editsubquestionIshow">
				<div class="objsubContent">
					<h3>编辑主观题</h3>
					<div class="objsubattention">
						<span>注意：</span>
						<p>步长可设置制定分值给分，请用英文逗号分隔（,）。</p>
					</div>
					<div class="tablebox">
						<ul class="tableboxtitle">
							<li style="width:110px;">题号</li>
							<li style="width:96px;">试题编号</li>
							<li style="width:70px;">满分</li>
							<li style="width:110px;">评阅系数</li>
							<li style="width:80px;">步长</li>
							<li style="width:80px;">多评轮次</li>
							<li style="width:220px;">操作</li>
						</ul>
						<ul class="tableboxcontent">
							<li>
								<div class="bigquestion">
									<div class="tabletrtd" style="width:110px;">
										<div style="display: flex;align-items: center;">
											  <div style="display:none;">dasdf</div>
											  <el-input class="fxwidth" v-model="editsubjectquestionlist.sourcename" placeholder=""  @input="editsubjectquestionlist.sourcename = onlyzzNumber(editsubjectquestionlist.sourcename)"></el-input>
										</div>
									</div>
									<div class="tabletrtd" style="width:70px;">
										<el-input v-model="editsubjectquestionlist.sourcename3" placeholder="" class="fxwidth" @input="editsubjectquestionlist.sourcename3 = onlyNumber(editsubjectquestionlist.sourcename3)"></el-input>
									</div>
									<div class="tabletrtd" style="width:110px;">
										<el-input v-model="editsubjectquestionlist.highestscore" placeholder="" class="fxwidth" @input="editsubjectquestionlist.highestscore = onlyNumber(editsubjectquestionlist.highestscore)"></el-input>
									</div>
									<div class="tabletrtd" style="width:80px;">
										<el-input v-model="editsubjectquestionlist.difficulty" placeholder="" class="fxwidth"></el-input>
									</div>
									<div class="tabletrtd" style="width:80px;">
										<el-input v-model="editsubjectquestionlist.bc" placeholder="" class="fxwidth"></el-input>
									</div>
									<div class="tabletrtd" style="width:80px;">
										<el-select v-model="editsubjectquestionlist.doublescoretype" placeholder="请选择" class="selectbox">
										    <el-option
										      v-for="item in doobbleplun"
										      :key="item.id"
										      :label="item.name"
										      :value="item.id">
										    </el-option>
										  </el-select>
									</div>
									<!-- <div class="tabletrtd" style="width:80px;">
										<i :class="item.finalScoring?'yes':'no'" @click="item.finalScoring=!item.finalScoring">{{item.finalScoring?'是':'否'}}</i>
									</div> -->
									<div class="tabletrtd" style="width:220px;">
										<div style="display: flex;">
											<el-button type="text" size="small" style="display: flex;align-items: center;color:#EC555A">删除</el-button>
										</div>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<!-- <div style="color:rgb(236, 85, 90);font-size:14px;padding-top:14px;">
						注意：新增主观题题号与试卷模板客观题题号对比缺少214，如试题管理与试卷模板题号不配时会造成不能开启扫描状态，如需继续保存请再次点击保存按钮。
					</div> -->
					<div class="groupbutton">
						<el-button type="primary" @click="editquestionsurebc">保存</el-button>
						<el-button type="primary" @click="editquestiongoback">返回</el-button>
					</div>
				</div>
			</div>
			<!-- 图片查看组件 -->
			<ImageViewer 
				:images="images"
				:initial-index="selectedIndex"
				:visible="showViewer"
				@update:visible="val => showViewer = val"
			/>
        </div>
</template>

<script>
import ImageViewer from '../imageview/imageview.vue'
import {batchdeleteSubjetive,editsubjective} from '../../api/api.js'
export default {
	components: { ImageViewer },
	props:['subjectivequestionslist'],
    data() {
        return {
            multipleSelection: [],
			editsubquestionIshow:false,
			editsubjectquestionlist:{
				sourceflagid:0,
				sourcename:0,
				sourcename3:'',
				highestscore:0,
				difficulty:0,
				bc:1,
				itemCaseflagid:0,
				imgWidth:0,
				imgHeight:0,
				cuttype:0,
				ax:0,
				ay:0,
				type:0,
				pagetype:0
			},
			questionclassifylist:[
				{
					id:0,
					name:'主观题'
				},
				{
					id:1,
					name:'单选题'
				},
				{
					id:2,
					name:'多选题'
				}
			],
			doobbleplun:[{id:'0',name:'一评'},{id:'1',name:'多评'}],
			showViewer: false,
      		selectedIndex: 0,
			images:[]
        }
    },
	methods:{
		handleSelectionChange(val) {
			this.multipleSelection = val;
	    },
	    //批量删除
		batchDeletateobjective(){
			let ids = this.multipleSelection.map(item=>item.pressflagid)
		    // sourceflagids
			if(ids.length==0){
				this.$message({
					type:'error',
					message: '请选择要删除的题目!'
				});
				return
			}
			console.info('ids',ids)
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				batchdeleteSubjetive({sourceflagids:ids}).then(res=>{
					if(res.code==0){
						this.$emit('emitsubjectivequestion',1)
						this.$message({
							type:'success',
							message: '删除成功!'
						});
					}
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
			});
		},
		// 单个删除
		dgdeletequestion(id){
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let obj={
					sourceflagids:[id]
				}
				batchdeleteSubjetive(obj).then(res=>{
					if(res.code==0){
						this.$emit('emitsubjectivequestion',1)
						this.$message({
							type:'success',
							message: '删除成功!'
						});
					}
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
			});
		},
		// 编辑
		editExamschool(con){
			console.info('con',con)
			this.editsubjectquestionlist.sourceflagid = con.sourceflagid
			this.editsubjectquestionlist.sourcename = con.sourcename
			this.editsubjectquestionlist.sourcename3 = con.sourcename3
			this.editsubjectquestionlist.highestscore = con.highestscore
			this.editsubjectquestionlist.difficulty = con.difficulty
			this.editsubjectquestionlist.bc = con.bc
			this.editsubquestionIshow = true
		},
		editquestionsurebc(){
			editsubjective(this.editsubjectquestionlist).then(res=>{
				console.info('res',res)
				if(res.code==0){
					this.editsubquestionIshow = false
					this.$emit('emitsubjectivequestion',1)
					this.$message({
						type:'success',
						message: '编辑成功!'
					});
					this.editsubjectquestionlist={
						sourceflagid:0,
						sourcename:0,
						sourcename3:'',
						highestscore:0,
						difficulty:0,
						bc:1,
						itemCaseflagid:0,
						imgWidth:0,
						imgHeight:0,
						cuttype:0,
						ax:0,
						ay:0,
						type:0,
						pagetype:0
					}
				}else{
					this.$message({
						type:'error',
						message: res.msg
					});
				}
			})
		},
		editquestiongoback(){
			this.editsubquestionIshow = false
			this.editsubjectquestionlist={
				sourceflagid:0,
				sourcename:0,
				sourcename3:'',
				highestscore:0,
				difficulty:0,
				bc:1,
				itemCaseflagid:0,
				imgWidth:0,
				imgHeight:0,
				cuttype:0,
				ax:0,
				ay:0,
				type:0,
				pagetype:0
			}
		},
		showViewerclick(imgs,index){
			this.images = imgs
			this.selectedIndex = index
      		this.showViewer = true
		}
	}
}
</script>

<style scoped>
.custom-table {
	  width: 100%;
	  border: 1px solid rgba(216,228,240,0.34);
	  border-radius:10px;
	  border-right: none;
	  border-bottom:none;
	}
	
	/* 自定义表格内部元素的样式 */
	.custom-table >>> .el-table__header-wrapper th {
	  background-color: #E8F0FA;
	  height:42px;
	  padding:0;
	  text-align: center;
	  font-weight:normal
	}
	.custom-table >>> .el-table__row td {
	  height:42px;
	  padding:0;
	  text-align: center;
	  border-bottom:none;
	  border-right:solid 1px rgba(216,228,240,0.34);
	  font-size:14px;
	}
	.el-table .warning-row {
	    background: #ffffff;
	 }
	.el-table .success-row {
	    background: #D8E4F0;
	}
     .el-table .el-table__cell{
        padding:8px 0;
    }
    .examfooter{
		width:100%;
		height:54px;
		left:0;
		bottom:0;
	}
	.examFootercontent{
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.examFootercontent .totaldata{
		font-size:14px;
	}
	.examFootercontent .totaldata i{
		display: inline-block;
		color:#295CFF;
		font-style: normal;
		line-height:54px;
		padding:0 3px;
	}
    .scopednr b{
        display: inline-block;
        font-weight:normal;
        margin:0 8px;
        color:#165DFF;
        cursor: pointer;
    }
    .scopednr b:last-child{
        color:#D54941
    }
    .objsubMain{
		position:fixed;
		left:0;
		top:0;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.75);
		z-index:100;
	}
	.objsubContent{
		box-sizing: border-box;
		width: 1040px;
		max-height: 600px;
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		position: fixed;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		padding:24px;
	}
	.objsubContent h3{
		font-size:18px;
		font-weight: normal;
	}
	.objsubattention{
		display: flex;
		font-size:14px;
		color:#619CF5;
		padding:10px 0 24px;
	}
    .boxsetscorll{
		height:390px;
		overflow-x: hidden;
		overflow-y: auto;
	}
	.boxsetscorll::-webkit-scrollbar {
		 width:6px;
		background-color: #eee;
		border-radius:10px;
	}
	.boxsetscorll::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.boxsetscorll::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	} 
    .tablebox{
		width:100%;
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
	}
	.tableboxtitle{
		display: flex;
		align-items: center;
		height:42px;
		background:#E8F0FA;
		border-radius:10px 10px 0 0;
	}
	.tableboxtitle li{
		line-height:42px;
		text-align:center;
		font-size:14px;
		color:#2A303B;
		border-right: 1px solid rgba(216,228,240,0.34);
	}
	.tableboxtitle li:first-child{
		border-radius: 10px 0 0 0;
	}
	.tableboxtitle li:last-child{
		border-radius: 0 10px 0 0;
		border-right: none
	}
	.tableboxcontent{
		width:100%;
	}
	.tableboxcontent li:nth-child(2n){
		background: #FAFAFB;
	}
	.bigquestion{
		display: flex;
		align-items: center;
	}
	.tabletrtd{
		display:flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		height:42px;
		border-right:1px solid rgba(216,228,240,0.34)
	}
	.bigquestion div.tabletrtd:last-child{
		border-right: none
	}
	.groupbutton{
		margin-top:20px;
	}
</style>